<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"
      xmlns:t="http://myfaces.apache.org/tomahawk">
    <ui:composition template="#{contextPath}/layouts/default.xhtml">
        <ui:define name="title">#{text['timecardList.title']}</ui:define>
        <ui:param name="menu" value="AdminMenu"/>

        <ui:define name="resources">
            <link rel="stylesheet" type="text/css" media="all" href="#{contextPath}/styles/jsDatePick_ltr.min.css" />
            <script type="text/javascript" src="#{contextPath}/scripts/jsDatePick.min.1.3.js"></script>
            <script type="text/javascript">
                window.onload = function() {
                    new JsDatePick({
                        useMode: 2,
                        target: "searchForm:dateInput",
                        dateFormat: "%d/%m/%Y"
                    });
                };
            </script>
        </ui:define>
        <ui:define name="body">
            <div class="col-sm-10">
                <h2>#{text['timecardList.heading']}</h2>

                <h:form id="searchForm" styleClass="form-inline"> 
                    <div class="row">
                        <div class="col-sm-3 form-group">
                            <h:outputLabel value="#{text['timecardList.user']}" for="users"/>
                            <h:selectOneMenu value="#{timecardList.user}" id="users" styleClass="form-control" style="height: 30px; padding: 0;">
                                <f:selectItem itemLabel=""/>
                                <t:selectItems value="#{timecardList.users}" var="user" itemLabel="#{user.fullName}" itemValue="#{user}"/>
                                <f:converter converterId="objconverter"/>
                            </h:selectOneMenu>
                        </div>
                        <div class="col-sm-2 form-group">
                            <h:outputLabel value="#{text['timecard.date']}" for="dateInput"/>                            
                            <h:inputText id="dateInput" size="20" value="#{timecardList.loginDate}" styleClass="form-control input-sm">
                                <f:convertDateTime pattern="dd/mm/yyyy"/>  
                            </h:inputText>
                        </div>
                        <div class="col-sm-3 form-group">
                            <h:outputLabel value="#{text['timecardList.period']}" for="period"/>   
                            <h:selectOneRadio id="period" value="#{timecardList.currentPeriod}">
                                <f:selectItem itemValue="true" itemLabel="#{text['timecardList.currentPeriod']}"/>
                                <f:selectItem itemValue="false" itemLabel="#{text['timecardList.previousPeriod']}"/>
                            </h:selectOneRadio>
                        </div>
                        <div class="col-sm-2 form-group" style="padding-top: 25px">
                            <h:commandButton styleClass="btn btn-default btn-sm" action="#{timecardList.search}" value="#{text['button.search']}"/>
                        </div>
                    </div>
                </h:form>

                <br/>
                <h:form id="editTimecard">
                    <div id="actions" class="btn-group">
                        <!-- <script> shows up here and causes square corners on the Add button below -->
                        <h:commandButton action="#{timecardForm.add}" value="#{text['button.add']}" id="add"
                                         styleClass="btn btn-primary">
                        </h:commandButton>
                        <h:commandButton value="#{text['button.done']}" action="home" id="cancel"
                                         immediate="true" styleClass="btn btn-default">
                        </h:commandButton>
                    </div>

                    <p:dataTable id="timecards" var="timecard" value="#{timecardList.timecards}" sortBy="#{timecardList.sortColumn}"
                                 paginator="true" rows="25"
                                 emptyMessage="#{text['records.empty']}"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 rowsPerPageTemplate="5,10,15">
                        <p:column style="width: 20%">
                            <f:facet name="header">
                                <p:column sortBy="loginTime">
                                    <h:outputText value="#{text['timecard.date']}"/>                                    
                                </p:column>
                            </f:facet>                            
                            <h:commandLink action="#{timecardForm.edit}">
                                <h:outputText value="#{timecard.loginTime}">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:outputText>
                                <f:param name="id" value="#{timecard.id}"/>
                            </h:commandLink>
                        </p:column> 
                        <p:column style="width: 20%">
                            <f:facet name="header">
                                <p:column sortBy="loginTime">
                                    <h:outputText value="#{text['timecard.login']}"/>
                                </p:column>
                            </f:facet>
                            <h:outputText value="#{timecard.loginTime}">
                                <f:convertDateTime pattern="h:mm a"/>
                            </h:outputText>
                        </p:column> 
                        <p:column style="width: 20%">
                            <f:facet name="header">
                                <p:column sortBy="logoutTime">
                                    <h:outputText value="#{text['timecard.logout']}"/>
                                </p:column>
                            </f:facet>
                            <h:outputText value="#{timecard.logoutTime}">
                                <f:convertDateTime pattern="h:mm a"/>
                            </h:outputText>
                        </p:column>  
                        <p:column style="width: 20%">
                            <f:facet name="header">
                                <p:column sortBy="reason">
                                    <h:outputText value="#{text['timecard.reason']}"/>
                                </p:column>
                            </f:facet>
                            <h:outputText value="#{timecard.reason}"/>
                        </p:column>
                        <p:column style="width: 20%">
                            <f:facet name="header">
                                <p:column sortBy="totalHours">
                                    <h:outputText value="#{text['timecard.totalHours']}"/>
                                </p:column>
                            </f:facet>
                            <h:outputText value="#{timecard.totalHours}"/>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</html>